<template>
  <div class="inspection-device">
    <div class="content">
      <div class="table-title">
        <div class="text">预约服务订单</div>
      </div>
      <base-search ref="baseSearch" :formList="searchFormList" @search="search"></base-search>
      <div class="table">
        <el-table :data="tableData" header-cell-class-name="table-header" v-loading="tableLoading">
          <el-table-column label="订单ID" prop="id"></el-table-column>
          <el-table-column label="预约名称" prop="subName"></el-table-column>
          <el-table-column label="预约类型" prop="typeName"></el-table-column>
          <el-table-column label="订单费用" prop="money"></el-table-column>
          <el-table-column label="预约者" prop="subUser"></el-table-column>
          <el-table-column label="订单创建者" prop="createUser"></el-table-column>
          <el-table-column label="创建时间">
          <template slot-scope="{ row }">{{ format_dateTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <table-action-item title="详情" icon="icon-eye" @takeAction="showDetailDialog(scope.row)"></table-action-item>
          </template>
        </el-table-column>
        </el-table>
        <el-pagination
          layout="total, prev, pager, next, sizes, jumper"
          :current-page="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          @size-change="handlePageSizeChange"
          @current-change="handlePageNumChange">
        </el-pagination>
      </div>
    </div>

    
    <!-- 详情 -->
    <el-dialog
      :visible.sync="isShowDetailDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="服务预约订单详情"
      width="1250px">
      <detail
        v-if="isShowDetailDialog"
        :id="currentActionRow.id"
        @close="isShowDetailDialog=false">
      </detail>
    </el-dialog>
    
  </div>
</template>


<script>
import { format_tableData_null } from '@/utils/formatter'
import { transformDisplayName } from '@/utils/dictionary'

import BaseSearch from '@/components/BaseSearch'
import TableAction from '@/components/table-action/TableAction'
import TableActionItem from '@/components/table-action/TableActionItem'

import { format_null, format_dateTime } from '@/utils/formatter'

import Detail from './Detail'
import Edit from './Edit.vue'

import { listApi } from '@/api/modules/subscribe/order'

export default {
  name: 'InspectionDevice',
  components: {
    BaseSearch,
    TableAction,
    TableActionItem,
    Detail,
    Edit
  },
  data () {
    return {

      chart1: null,
      chart1_option: null,

      searchFormList: [
        { label: '订单号 ', prop: 'id', type: 'text' },
        { label: '预约名称 ', prop: 'subscribeName', type: 'text' }
      ],
      searchForm: {
        equipmentType: null,
        equipmentState: null,
        equipmentName: null,
        brand: null,
        manufacturer: null,
        warehouse: null
      },

      tableData: [],
      tableLoading: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },

      isShowDetailDialog: false,
      isShowEditDialog: false,
      isShowCreateInspectorDialog: false,

      currentActionRow: null
    }
  },
  methods: {
    transformDisplayName,
    format_dateTime,

    /* ========== 图表相关 ========== */
    initCharts () {
      this.chart1 = this.$echarts.init(document.querySelector('#chart1'))

      this.chart1_option = {
        dataset: {
          source: [
            ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          ]
        },
        legend: {
          show: true,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          bottom: 0,
          left: 0,
          right: 0,
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
        },
        series: {
          name: '设备数量',
          color: '#3ba1ff',
          color: '#fec242',
        areaStyle: {},
          type: 'line',
          seriesLayoutBy: 'row'
        }
      }

      this.chart1.setOption(this.chart1_option)

      this.setChartsData()
    },
    async setChartsData () {
      try {
        const { data } = await chartsDataApi()
        
        this.chart1_option.dataset = {
          dimensions: ['month', 'value'],
          source: data
        }
        this.chart1.setOption(this.chart1_option)
      } catch (err) {
        console.error(err)
      }
      // this.chart1_option.dataset = {
      //   source: [
      //     ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      //     [1, 3, 9, 12, 15, 16, 20, 32, 37, 45, 51, 52]
      //   ]
      // }
      // this.chart1.setOption(this.chart1_option)
    },
    resizeCharts () {
      this.chart1.resize()
    },

    /* ========== 搜索相关 ========== */
    /* ========== 表格相关 ========== */
    search (searchForm) {
      this.pageInfo.pageNum = 1
      this.searchForm = searchForm
      this.getList()
    },
    async getList () {
      try {
        this.tableLoading = true
        const params = {
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          ...this.searchForm
        }
        const res = await listApi(params)
        
        const { list, total } = res.data
        this.tableData = format_tableData_null(list)
        this.pageInfo.total = total
      } catch (err) {
        console.error(err)
      }
      this.tableLoading = false
    },
    handlePageSizeChange (pageSize) {
      this.pageInfo.pageSize = pageSize
      this.getList()
    },
    handlePageNumChange (pageNum) {
      this.pageInfo.pageNum = pageNum
      this.getList()
    },


    /* ========== 表格操作相关 ========== */
    // 详情
    showDetailDialog (row) {
      this.isShowDetailDialog = true
      this.currentActionRow = row
    },
    // 修改
    showEditDialog (row) {
      this.isShowEditDialog = true
      this.currentActionRow = row
    },
    editSuccess () {
      this.isShowEditDialog = false
      this.getList()
    },
    // 设备控制台
    goToController(row) {
      this.$router.push({ name: 'DEVICE_MANAGE_CONTROLLER', params: { id: row.id } })
    }
  },
  mounted () {
    this.getList()

    window.addEventListener('resize', () => {
      this.resizeCharts()
    })
  }
}
</script>

<style lang="less" scoped>
.inspection-device {
  padding: 24px;

  .charts {
    background-color: #FFF;
    min-height: 220px;
    border-bottom: 1px solid rgb(235, 235, 235);
    padding: 24px;
    display: grid;
    grid-template-columns: 30% 70%;
    justify-items: center;
    align-items: center;
    .icon {
      width: 50%;
      height: 180px;
      position: relative;
      top: 24px;
      left: -24px;
      
      .iconfont {
        color: rgba(0, 0, 0, .7);
        color: #879bd7;
      }
      .icon-check {
        position: absolute;
        font-size: 64px;
        top: -24px;
        right: -24px;
      }
      .icon-agency {
        position: absolute;
        font-size: 180px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    #chart1 {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    background-color: #FFF;
    padding: 24px;
    .table-title {
      border-bottom: 1px solid rgb(235, 235, 235);
      padding: 0 12px 12px 12px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .search-form {
      padding: 12px 0;

      display: flex;
      flex-wrap: wrap;

      .el-cascader, .el-select, .el-input {
        width: 240px;
        margin-right: 12px;
        margin-bottom: 12px;
      }
    }
    :deep(.el-table) {
      th {
        .el-table__cell {
          background-color: #F8F8F9;
          padding: 8px 0;
        }
      }
    }
    .el-pagination {
      text-align: right;
      padding: 24px 0;
    }
  }
}
</style>